import React ,{useState ,useEffect} from 'react';
import {DatePicker ,Input ,Select ,Drawer ,Form ,Button ,notification} from 'antd'
import { ClearOutlined ,SyncOutlined ,ExpandAltOutlined ,SettingOutlined ,UnlockOutlined ,LockOutlined} from '@ant-design/icons'
import 'dayjs/locale/zh-cn';
import './index.scss'
import CustomTable from '../../../../components/ccl/CustomTable';
import * as service from '../../../../api/ccl';

const Account = () => {
    const { Search } = Input;
    
    const [open, setOpen] = useState(false)
    const [data ,setData] = useState([])
    useEffect(()=>{
        accountList()
    },[])
    const accountList = async() => {
        const res = await service.accountList()
        if(res.data.code == 200){
            setData(res.data.data)
            console.log(res.data.data);
        }
        
    }

    const onSearch = async (value:string) => {
        if(value! = ''){
            const res = await service.count_findByname({name:value,page:1,limit:10})
            if(res.data.code == 200){
                notification.success({message:'查询成功',duration:2})    
                console.log(res.data.data);
                        
                setData(res.data.data)
            }else{
                notification.error({message:'查询失败',duration:2})
            }
        }        
    }
    const handClick = async (record:any) => {
        if(record.countStatus == 0){
            record.countStatus = 1
            const res = await service.count_updateByCount({record})
            if(res.data.code == 200){
                notification.success({message:'修改成功',duration:2})
            }
        }
    }
    const handFlush = () => {

    }
    // 关闭抽屉
    const onClose = () => {
        setOpen(false)
    }
    // 
    const onFinish = (values: any) => {
        console.log('Success:', values);
    };
    const handleChange = async (value: string) => {        
        if(value == '启用'){
            const res = await service.count_findByStatus({status:1})
            setData(res.data.data)
        }else if(value == '禁用'){
            const res = await service.count_findByStatus({status:0})
            setData(res.data.data)
        }else{
            accountList()
        }
    };
    const columns:any = [
        {
            title:'操作',
            key:'proname',
            width:'100px',
            render: (record:any) => (
                <div className='caoz'>
                    <SettingOutlined />
                    <div onClick={(record:any) => {handClick(record)}}>
                        {
                            record.countStatus == 0 ? <LockOutlined /> : <UnlockOutlined />
                        }

                    </div>
                </div>
            )
        },
        {
            title:'客户',
            key:'countName',
            dataIndex: 'countName',
        },
        {
            title:'应收金料',
            key:'countRecegold',
            dataIndex: 'countRecegold',
        },
        {
            title:'应收银料',
            key:'countRecesilver',
            dataIndex: 'countRecesilver',
        },
        {
            title:'可用金额',
            key:'countRecemoney',
            dataIndex: 'countRecemoney',
        },
        {
            title:'可用金料',
            key:'countRecemoney',
            dataIndex: 'countRecemoney',
        },
        {
            title:'可用银料',
            key:'countReceusersilver',
            dataIndex: 'countReceusersilver',
        },
        {
            title:'业务员',
            key:'countSaleman',
            dataIndex: 'countSaleman',
        },
        {
            title:'状态',
            key:'countStatus',
            dataIndex: 'countStatus',
            render:(_:any,record:any) => {
             return (record.countStatus == 1 ? '启用' : '禁用')
            }
        },
    ]
    let newData = data.map((item:any,index:any) => ({
        key:index,
        index:item.countId,
        countName:item.countName,
        countRecemoney:item.countRecemoney,
        countRecegold:item.countRecegold,
        countRecesilver:item.countRecesilver,
        countReceusergold:item.countReceusergold,
        countReceusermoney:item.countReceusermoney,
        countReceusersilver:item.countReceusersilver,
        countSaleman:item.countSaleman,
        countStatus:item.countStatus
    }))
    return (
        <div className='account'>
            <div className="header">
                <div className="header-right">
                    <div className="search">
                        <Search
                        placeholder="请输入客户名称"
                        allowClear
                        enterButton="搜索"
                        onSearch={onSearch}
                        />
                    </div>
                    <div className="select">
                        状态：
                        <Select
                        placeholder= '请选择状态'
                        style={{ width: 120 }}
                        onChange={handleChange}
                        options={[
                            { value: '全部', label: '全部' },
                            { value: '启用', label: '启用' },
                            { value: '禁用', label: '禁用' },
                        ]}
                        />
                    </div>
                    <div className="operation">
                        <ClearOutlined  />
                        <SyncOutlined  onClick={handFlush}/>
                        <ExpandAltOutlined />
                    </div>
                </div>
            </div>
            <Drawer title="新增充值单" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                    label="充值单号"
                    name="username"
                    rules={[{ required: true, message: '请输入充值单号!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                    label="客户名称"
                    name="username"
                    rules={[{ required: true, message: '请输入客户名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                    label="充值类型"
                    name="username"
                    rules={[{ required: true, message: '请输入充值类型!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                    label="充值金额"
                    name="username"
                    rules={[{ required: true, message: '请输入充值金额!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                    label="操作人"
                    name="username"
                    rules={[{ required: true, message: '请输入操作人姓名!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                    label="选择时间"
                    name="username"
                    rules={[{ required: true, message: '选择时间!' }]}
                    >
                         <DatePicker showTime />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            添加
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>

            {/* 表格 */}
            <CustomTable columns={columns} data={newData} />
        </div>
    );
};

export default Account;